<template>
  <div class="protection-origin" v-show="protectionOriginShow">
    <div class="protection-intro">
      <div class="protection-intro-content">
        <div class="protection-intro-content-title">
          <img
            src="../assets/home-perk-05.svg"
            alt=""
            class="protection-intro-content-pic"
          />
          <div>Get Protected Now!</div>
        </div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi,
        cupiditate voluptatibus impedit nemo, illum pariatur at repudiandae
        officiis molestiae a dolorum dolorem quia reiciendis explicabo
        reprehenderit, perspiciatis totam voluptatum velit. Lorem ipsum dolor,
        sit amet consectetur adipisicing elit. Deserunt veniam laborum vero.
        Voluptatum, asperiores est. Accusamus vitae assumenda, consectetur,
        praesentium rem quibusdam amet cupiditate doloremque harum ipsam
      </div>
    </div>

    <div class="search-area">
      <div class="search-box">
        <input
          type="text"
          placeholder="search for protection"
          v-model="keyword"
          @keyup="filterProtection($event)"
        />
      </div>
      <div class="search-icon"><img src="../assets/search2.png" alt="" /></div>
    </div>

    <div class="protection-args-wrapper">
      <ul>
        <li>
          <div class="protection-li protection-args">
            <div>Protected</div>
            <div>Network</div>
            <div>Premium Rate</div>
            <div>Capacity</div>
            <div>Occupied</div>
            <div>Coverage</div>
          </div>
        </li>
      </ul>

      <Spin
        :spinning="globalViewerDataLoading"
        wrapperClassName="governance-container"
      >
        <ul>
          <li
            v-for="item in protectionStatus"
            :key="item.Name"
            :v-if="item.show"
          >
            <router-link :to="`/protection/${item.Protocol}`">
              <div class="protection-li protection-ins">
                <div>{{ item.Protected }}</div>
                <div>{{ item.Network }}</div>
                <div>{{ item["Premium Rate"] }}</div>
                <div>{{ item.Capacity }}</div>
                <div>{{ item.Occupied }}</div>
                <div>{{ item.Coverage }}</div>
              </div>
            </router-link>
          </li>
          <!-- <li v-show="protectionStatus[0].show" @click="protectOriginNotshow()">
          <router-link to="/protection/protectionBtc">
            <div class="protection-li protection-ins">
              <div>Compound V3</div>
              <div>Ethereum</div>
              <div>3.00%</div>
              <div>50000 USDT</div>
              <div>28%</div>
              <div>36000 USDT</div>
            </div>
          </router-link>
        </li>

        <li v-show="protectionStatus[1].show" @click="protectOriginNotshow()">
          <router-link to="/protection/protectionBtc">
            <div class="protection-li protection-ins">
              <div>Aave</div>
              <div>Ethereum</div>
              <div>3.59%</div>
              <div>100000 USDT</div>
              <div>59%</div>
              <div>41000 USDT</div>
            </div>
          </router-link>
        </li> -->
        </ul>
      </Spin>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
import { Spin } from "ant-design-vue";
import store from "../vuex/store";

export default {
  name: "ProtectionIns",
  components: { Spin },
  data() {
    return {
      keyword: "",
      // protectionStatus: [
      //   {
      //     name: " compoundCOMPOUNDCompound",
      //     Protected: "Compound V3",
      //     Network: "Ethereum",
      //     "Premium Rate": "3.00%",
      //     Capacity: "50000 USDT",
      //     Occupied: "28%",
      //     Useable: "36000 USDT",
      //     show: true,
      //   }, //name前留一空格以防人手滑输错，大小写都列上以确保输入大小写都能搜到
      //   {
      //     name: " ethETHEth",
      //     Protected: "Aave",
      //     Network: "Ethereum",
      //     "Premium Rate": "3.59%",
      //     Capacity: "100000 USDT",
      //     Occupied: "59%",
      //     Useable: "41000 USDT",
      //     show: true,
      //   },
      // ],
      protectionStatus: [],
    };
  },
  mounted() {
    console.log("加载protection");
    this.sortGlobalViewerData(store.state.web3Data.globalViewerData);
  },
  computed: {
    protectionOriginShow() {
      return store.state.web3Utils.protectionOriginShow;
    },
    globalViewerData() {
      return store.state.web3Data.globalViewerData;
    },
    globalViewerDataLoading() {
      return store.state.web3Data.globalViewerDataLoading;
    },
  },
  watch: {
    globalViewerData(newValue) {
      this.sortGlobalViewerData(newValue);
    },
    filterProtection() {
      let input = this.keyword;
      if (input == "") {
        this.protectionStatus.forEach((value) => {
          value.show = true;
        });
      } else {
        this.protectionStatus.forEach((value) => {
          if (value.name.indexOf(input) == -1) {
            value.show = false;
          } else {
            value.show = true;
          }
        });
      }
    },
    protectOriginNotshow() {
      store.dispatch("protectionOriginHideDo");
    },
  },
  methods: {
    sortGlobalViewerData(value) {
      let globalViewerData = value;
      let poolAddressArr = store.state.web3Data.poolAddressArr;
      globalViewerData.map(async (item) => {
        if (item.protocol !== "0x0000000000000000000000000000000000000000") {
          let contract = item.protocol;
          let res = await store.dispatch("getPremiumRate", {
            amount: (10 ** 18).toString(),
            date: "360",
            contract: contract,
          });
          this.protectionStatus.push({
            Protocol: item?.protocol,
            Name: poolAddressArr[item?.protocol.toLowerCase()]?.Name,
            Protected: poolAddressArr[item?.protocol.toLowerCase()]?.Protected,
            Network: poolAddressArr[item?.protocol.toLowerCase()]?.NetWork,
            "Premium Rate": `${res}%`,
            Capacity: `${
              parseInt(item.totalValidCertificateLiquidity.toHexString(), 16) /
              10 ** 18
            } USDT`,
            Occupied: `${(
              (parseInt(item.totalPendingCoverage.toHexString(), 16) /
                parseInt(
                  item.totalValidCertificateLiquidity.toHexString(),
                  16
                ).toFixed(2)) *
              100
            ).toFixed(4)} %`,
            Coverage: `${
              parseInt(item.totalPendingCoverage.toHexString(), 16) / 10 ** 18
            } USDT`,
            show: true,
            key: item?.protocol,
          });
        }
      });
    },
  },
};
</script>

<style>
.protection-intro {
  border: 1px solid #1649ff;
  border-radius: 5px;
  width: 80%;
  padding: 5%;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 20px;
  color: #a0a9bd;
  font-size: 20px;
  line-height: 32px;
}

.protection-intro-content-title {
  display: flex;
  font-size: 20px;
  font-weight: 700;
  align-items: center;
  margin-bottom: 20px;
  color: #eff1f6;
}

.protection-intro-content-pic {
  display: block;
  height: 50px;
  margin-right: 10px;
}

.search-area {
  display: flex;
  margin: 0 auto;
  margin-top: 20px;
  width: 90%;
  align-items: center;
}

.search-box {
  position: relative;
  border: 1px solid #a0a9bd;
  border-radius: 10px;
  width: 70%;
  height: 50px;
  background-color: #515b72;
}

.search-icon {
  margin-left: 10px;
}

.search-icon img {
  height: 36px;
}

.search-box input {
  display: block;
  height: 48px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Thicccboi, sans-serif !important;
  border: none;
  border-radius: 10px;
  padding-left: 10px;
  background-color: #515b72;
  color: #eff1f6;
  transition: background-color 0.3s linear;
}

.search-box input:hover {
  background-color: #1a2237;
  transition: background-color 0.3s linear;
}

.protection-args-wrapper {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: scroll;
}

.governance-container {
  min-height: 175px;
}

.protection-li {
  width: 800px;
}

.protection-args {
  display: flex;
  /* height: 30px; */
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #a0a9bd;
}

.protection-li div {
  width: 150px;
}
.protection-ins {
  height: 80px;
  background-color: #3561ff;
  border-radius: 10px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #eff1f6;
  transition: background-color 0.3s linear;
}

.protection-ins:hover {
  background-color: #1649ff;
  transition: background-color 0.3s linear;
}

.protection-li div {
  padding-left: 10px;
}

@media (min-width: 915px) {
  .protection-intro {
    width: 90%;
    padding: 2%;
  }

  .search-box {
    width: 30%;
  }

  .protection-args-wrapper {
    overflow: hidden;
  }

  .protection-li {
    width: 100%;
  }
}
</style>